<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>state</title>
  <style>
    .demo {
      cursor: pointer;
    }
  </style>
</head>
<body>

<div id="example"></div>
<div id="example2"></div>

<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>

<script type="text/babel">
  // /*
  // 需求: 自定义组件, 功能如下：
  //   1. 显示h2标题, 初始文本为: 佩奇是一头猪
  //   2. 点击标题更新为: 佩奇不是猪
  // */
  
  // //1.定义组件
  // class Pig extends React.Component{
  //   constructor(props){
  //     //console.log(props)  构造器里的this 是组件类的实例对象 
  //     super(props)
  //     //初始化状态
  //     this.state = {
  //       isPig:true
  //     }
  //     this.handlerClick = this.handlerClick.bind(this)
  //   }
    
  //   //自定义一个响应点击的函数
  //   handlerClick(){
  //     let isPig = !this.state.isPig
  //     //如下代码属于直接更新状态，不会被react所认可，不会被react“监听”到
  //     //this.state.isPig = isPig //不可以直接修改状态数据   组件实例对象的state： 1，不能直接修改 2. 不能直接更新
  //     //要更新状态，必须使用this.setState()
  //     this.setState({isPig})
  //   }
    
  //   //重写父类的render
  //   render(){
  //     //console.log('render()')
  //     let {isPig} = this.state
  //     //如下代码，在指定点击事件的时候，不要加()
  //     return <h2 onClick={this.handlerClick}>{isPig?'佩奇是一头可爱的猪':'佩奇不是猪'}</h2>
  //   }
    
  // }
  
  // //2.渲染组件标签
  // ReactDOM.render(<Pig/>,document.getElementById('example'))
  // ReactDOM.render(<Pig/>,document.getElementById('example2'))


  // 1.定义组件
  class Weather extends React.Component {
    state = {isHot: false} // 初始化状态 

     /* constructor(a)  {
      // 构造器里的this 是组件类的实例对象
      super (a) // 一个类继承了另外一个类  必须写
      // this.state = {isHot: false}
      this.clickHandel = this.clickHandel.bind(this)
      console.log(this);
    } */
    
    // 我们自己定义的demo  不是重写父类里已经存在的demo
    clickHandel = () => {   // 利用箭头函数没有this 的特性 箭头函数 找外层函数的this (就是该类的实例对象)
      let {isHot} = this.state
      // demo 中的this 是undefined ？？？
      // 在类组件中 所以我们编码人员自己定义的方法中的this 都是undefined
      // console.log(this);
      // 组件实例对象的state: 1. 不能直接修改 2. 不能直接更新
      //this.state.isHot = !this.state.isHot
      this.setState({isHot: !isHot})    // 更新状态
    }
    // 重写父类的render 
    render() {
      console.log('---------render');
      // render 调用的次数：  1+n 初始化页面的时候必须调用一次  
      // 随后更新状态时，若组件中用到了状态中的数据，会触发render 再次调用
      let {isHot} = this.state
      // render()的this 是组件类的实例对象
      return <h1  className = "demo"  onClick= {this.clickHandel}>今天天气很{isHot ? '炎热' : '凉爽'}</h1>
    }
  }
  // 2. 渲染组件标签
  ReactDOM.render(<Weather/>,document.getElementById('example'))
  
</script>
</body>
</html>

